<template>
  <div
    class="report-text"
    :style="{
      fontSize: config.fontSize + 'px',
      color: config.color,
      textAlign: config.align,
      width: '100%',
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: config.align === 'center' ? 'center' : config.align === 'right' ? 'flex-end' : 'flex-start',
      padding: '8px',
      boxSizing: 'border-box'
    }"
  >
    {{ config.text }}
  </div>
</template>

<script setup>
defineProps({
  config: {
    type: Object,
    required: true
  }
})
</script>

<style scoped>
.report-text {
  word-wrap: break-word;
  word-break: break-all;
}
</style>
